<script setup lang="ts">
import localeStore from '@/store/locale'
import { storeToRefs } from 'pinia'
const { localeInfo} = storeToRefs(localeStore())
const router = useRouter()
function turnPage(index) {
  var path=''
  if (index ==0) {
    path = '/Anesthesia'
  }else if(index ==1){
    path = '/Endoscopy'
  }
  else if(index ==2){
    path = '/Surgerydevices'
  }
  else if(index ==3){
    path = '/XRay'
  }
  else if(index ==4){
    path = '/Ultrasound'
  }
  else if(index ==5){
    path = '/Service'
  }

  router.push(path)
}
function onRouteBtnClick() {
  router.push('/FormEmail')
}


</script>

<template>
  <div class="Solutions">
    <div class="img_txt">
      <p>
        <span>{{localeInfo.solutions.imgtxt.txt}}</span>
        <span>{{localeInfo.solutions.imgtxt.txt1}}</span>
      </p>
       <img class="maxwidth_img" src="@/assets/img/animal/1.jpg" alt="">
    </div>
    <p class="title" >
      <span style="font-size: 31PX;">{{localeInfo.solutions.title}}</span>
    </p>
    <div class="cards">
      <div  v-for="(item,index) in localeInfo.solutions.cardTxts1" :key="index" @click='turnPage(index)'>
        <p>
          <span>{{item.name}}</span>
          <img v-if="index==0" src="@/assets/img/medical/Anesthesia.png" alt="">
          <img v-if="index==1" src="@/assets/img/medical/Endoscopy.png" alt="">
          <img v-if="index==2" src="@/assets/img/medical/Surgerydevices.png" alt="">
        </p>
      </div>
    </div>
    <div class="cards">
      <div  v-for="(item,index) in localeInfo.solutions.cardTxts2" :key="index" @click='turnPage(index+3)'>
        <p>
             <span>{{item.name}}</span>
          <img v-if="index==0" src="@/assets/img/medical/X-Ray.png" alt="">
          <img v-if="index==1" src="@/assets/img/medical/Ultrasound.jpg" alt="">
          <img v-if="index==2" src="@/assets/img/medical/service.png" alt="">
        </p>
      </div>
    </div>
    <div class="btn">
      <p>{{localeInfo.solutions.btnDesc}}</p>
      <p @click="onRouteBtnClick">
        <span>{{localeInfo.solutions.btntxt}}</span>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Solutions{
  padding-top: 10PX;
   img{
       width: 90%;
      display: block;
      margin-left: 5%;
    }
    .img_txt{
      position: relative;
      p{
        position: absolute;
        top: 40px;
        left: 5%;
        z-index: 10;
        background-color: rgba(199,200,203,0.5);
        padding: 2px 4px;
        span{
          font-size: 20px;
          font-weight: 600;
          color: #fff;
          display: block;
          line-height:20px;
        }
      }
    }
    .title{
      
      font-weight: bold;
      font-size: 25px;
      padding-left: 10px;
      color: rgb(197, 69, 69);
      line-height: 40px;
      // position: absolute;
    }
    .cards{
      padding: 0 10%;

      display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        &:nth-child(1) {
          div{
              // margin-top: 20px;
          }
        }
      div{
        
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        border: 1.5PX solid rgba(66,66,66,0.5);
        margin-right: 8px;
        border-radius: 5px;
        overflow: hidden;
              
        &:hover{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            p{
            height: 80px;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            // background-color: rgba(66,66,66,0.5);
            img{
              display: block;
              width: 60px;
              height: 60px;
             
            }
            span{
              display: inline-block;
              position: absolute;
              top: 0px;
              // height: 100%;
              line-height: 100px;
               color: #fff;
            background: rgba(0,0,0,0.15);
            // line-height: 80px;
            position: absolute;
            line-height: 20px;
            top: 40px;
            // height: 100%;
            font-size: 8px;
            text-align: center;
              
            }
            }
          }
        p{
          height: 100%;
          position: relative;
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          
          img{
            width: 40px;
            height: 40px;
            max-width: 50px;
            display: block;
          }
          span{
            display: inline-block;
            width: 100%;
            color: #fff;
            background: rgba(0,0,0,0.15);
            // line-height: 80px;
            position: absolute;
            line-height: 20px;
            top: 30px;
            // height: 100%;
            font-size: 8px;
            text-align: center;
            

          }
         }
      }
   
    }
    .btn{
      background-color: rgba(242,242,242,0.5);
      padding: 25px 0 15px 0;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 5PX;
      p{
        &:nth-child(1){
          color: #333;
          font-size: 16px;
          margin-bottom: 15px;
        }
        &:nth-child(2) {
          span{
            background-color: rgba(252,13,27,1);
            text-align: center;
            padding: 8PX 20PX;
            font-size: 8PX;
            color: #FFF;
            border-radius: 4PX;
          }
        }
      }
    }
}
</style>
